<script lang="ts" setup>
const bgBanner = "https://shq.qdjqy.cn/profile/0911/index/bg_banner.png"
const iconQing = "https://shq.qdjqy.cn/profile/0911/index/icon_qing.png"
const iconShandong = "https://shq.qdjqy.cn/profile/0911/index/icon_shandong.png"
const iconNew = "https://shq.qdjqy.cn/profile/0911/index/icon_new.png"
const iconMore = "https://shq.qdjqy.cn/profile/0911/index/icon_more.png"
const icon_1 = "https://shq.qdjqy.cn/profile/0911/index/icon_1.png"
const icon_2 = "https://shq.qdjqy.cn/profile/0911/index/icon_2.png"
const icon_3 = "https://shq.qdjqy.cn/profile/0911/index/icon_3.png"
const icon_4 = "https://shq.qdjqy.cn/profile/0911/index/icon_4.png"
const icon_5 = "https://shq.qdjqy.cn/profile/0911/index/icon_5.png"
const icon_6 = "https://shq.qdjqy.cn/profile/0911/index/icon_6.png"
const icon_7 = "https://shq.qdjqy.cn/profile/0911/index/icon_7.png"
const icon_8 = "https://shq.qdjqy.cn/profile/0911/index/icon_8.png"
const iconCenter = "https://shq.qdjqy.cn/profile/0911/index/icon_center.png"
const pic1 = "https://shq.qdjqy.cn/profile/0911/index/pic1.png"
const pic2 = "https://shq.qdjqy.cn/profile/0911/index/pic2.png"
const pic3 = "https://shq.qdjqy.cn/profile/0911/index/pic3.png"
const pic4 = "https://shq.qdjqy.cn/profile/0911/index/pic4.png"
const pic5 = "https://shq.qdjqy.cn/profile/0911/index/pic5.png"

defineOptions({
  name: 'Home',
})
definePage({
  type: 'home',
  style: {
    navigationStyle: 'custom'
  },
})

  // const { UNI_PLATFORM } = process.env
  // console.log('UNI_PLATFORM -> ', UNI_PLATFORM) // 得到 mp-weixin, h5, app 等

function isWritting() {
  uni.showToast({
    title: '正在开发中',
    icon: 'none',
    duration: 2000
  })
}

function jump(url: string) {
  uni.navigateTo({ url });
}

const tab = ref<number>(0)
const tabsWithBadge = ref([
  { title: '热门景区' },
  { title: '猜你喜欢' }
])

function handleChange(event: any) {
  tab.value = event.index;
}

interface Coupon {
  id: number,
  image: string,
  title: string,
  time: string,
  count: number,
  price: number
}

// normal 待出游、 used 已出游 、 cancel 已取消
const reservedList = reactive<Coupon[]>([
  { id: 1, image: pic1, title: '机遇时空X-META全感VR乐园', time: '10:00-22:00', count: 1, price: 109},
  { id: 2, image: pic2, title: '青岛融创水世界（山东融创5选1）', time: '10:00-22:00', count: 2, price: 309},
  { id: 2, image: pic3, title: '山东文旅·红叶柿岩旅游区', time: '10:00-22:00', count: 2, price: 99},
  { id: 2, image: pic4, title: '济南融创乐园（山东融创5选1）', time: '10:00-22:00', count: 2, price: 101},
  { id: 2, image: pic5, title: '琅琊古城', time: '10:00-22:00', count: 2, price: 5}
])
</script>

<template>
  <view class="suggest-container">
    <image class="bg-img" :src="bgBanner" mode="widthFix" />
    <image class="icon-sd" :src="iconShandong" mode="widthFix" />
    <image class="icon-qd" :src="iconQing" mode="widthFix" />

    <view class="title flex">
      <view class="content flex">
        <view class="left flex">
          <image class="img" :src="iconNew" mode="aspectFit"></image>
          <view class="span"> 关于滕州野生动物园合作调整</view>
        </view>
        <view class="right flex">
          <view class="operater">更多</view>
          <image class="img2" :src="iconMore" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <view class="select">
      <wd-grid :column="4" clickable>
        <wd-grid-item text="年卡购买" @itemclick="jump('/pages/annualCardBuy/index')">
          <template #icon>
            <image class="slot-img2" :src="icon_1" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="年卡激活" @itemclick="jump('/pages/annualCardBind/index')">
          <template #icon>
            <image class="slot-img2" :src="icon_2" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="景区预约" @itemclick="jump('/pages/scenicList/index')">
          <template #icon>
            <image class="slot-img2" :src="icon_3" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="影院预约" @itemclick="jump('/pages/filmList/index')">
          <template #icon>
            <image class="slot-img2" :src="icon_4" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="推荐路线" @itemclick="jump('/pages/recommendWay/index')">
          <template #icon>
            <image class="slot-img2" :src="icon_5" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="联名权益" @itemclick="isWritting">
          <template #icon>
            <image class="slot-img2" :src="icon_6" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="电子导览" @itemclick="isWritting">
          <template #icon>
            <image class="slot-img2" :src="icon_7" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="使用说明" @itemclick="isWritting">
          <template #icon>
            <image class="slot-img2" :src="icon_8" mode="aspectFill"/>
          </template>
        </wd-grid-item>
      </wd-grid>
    </view>

    <view class="navigation">
      <image class="nav_img" :src="iconCenter" mode="aspectFit"></image>
    </view>

    <view class="goodlist">
      <wd-tabs v-model="tab" @change="handleChange">
        <wd-tab v-for="(item, index) in tabsWithBadge" :key="index" :title="`${item.title}`">
          <view class="cantent flex" v-for="(itm, idx) in reservedList" :key="idx">
            <image class="head_img" :src="itm['image']" mode="aspectFill"></image>
            <view class="right">
              <view class="good_tltle">{{itm['title']}}</view>
              <view class="good_time">开放时间：{{itm['time']}}</view>
              <view class="count">剩余{{itm['count']}}次</view>
              <view class="price">售价：￥{{itm['price']}}</view>
            </view>
            <wd-button type="error" size="small" custom-class="good_btn">立即预约</wd-button>
          </view>
          <view class="bottom_loading">已经到底啦~</view>
          <view style="height: 20rpx;"></view>
        </wd-tab>
      </wd-tabs>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.suggest-container {
  & .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 650rpx;
    z-index: -2; 
    vertical-align: top;
  }
  & .icon-qd {
    position: absolute;
    top: 100rpx;
    left: 170rpx;
    width: 45rpx;
    height: 45rpx;
    z-index: -1; 
  }
  & .icon-sd {
    position: absolute;
    top: 90rpx;
    left: 40rpx;
    width: 100rpx;
    height: 100rpx;
    z-index: -1; 
  }
  & .title {
    margin-top: 630rpx;
    width: 750rpx;
    border-radius: 30rpx 30rpx 0 0;
    background-color: #fff;
    & .content {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      width: 710rpx;
      margin: 30rpx auto 20rpx auto;
      background: #F4F7FF;
      box-sizing: border-box;
      padding: 10rpx 20rpx;
      justify-content: space-between;
      & .left {
        & .img {
          width: 120rpx;
          height: 60rpx;
        }
        & .span {
          margin-left: 20rpx;
          line-height: 60rpx;
          font-size: 24rpx;          
          width: 400rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
        }
      }
      & .right {
        & .operater {
          line-height: 60rpx;
          font-size: 26rpx;
        }
        & .img2 {
          margin-left: 10rpx;
          margin-top: 17rpx;
          width: 34rpx;
          height: 34rpx;
        }
      }
    }
  }
  & .select {
    width: 750rpx;
    & .slot-img2 {
      width: 80rpx;
      height: 80rpx;
    }
  }
  & .navigation {
    padding-top: 20rpx;
    width: 710rpx;
    height: 240rpx;
    margin: 0 auto;
    & .nav_img {
      width: 100%;

    }
  }
  & .goodlist {
    & .cantent {
      width: 710rpx;
      margin: 20rpx 20rpx;
      box-sizing: border-box;
      position: relative;
      & .head_img {
        border-radius: 20rpx;
        width: 260rpx;
        height: 200rpx;
      }
      & .right {
        margin-left: 15rpx;
        width: 430rpx;
        height: 200rpx;
        position: relative;
        & .good_tltle {
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
          font-size: 30rpx;
          font-weight: 700;
        }
        & .good_time {
          margin-top: 10rpx;
          font-size: 28rpx;
          color: #aaa;
          line-height: 40rpx;
        }
        & .count {
          margin-top: 20rpx;
          font-size: 30rpx;
          color: #e60012;
          line-height: 40rpx;
        }
        & .price {
          margin-top: 10rpx;
          font-size: 30rpx;
          color: #aaa;
          line-height: 40rpx;          
        }
      }

      :deep() {
        .good_btn {
          margin-right: 15rpx;
          position: absolute;
          right: 15rpx;
          bottom: 0;
        }
      }
    }
    & .bottom_loading {
      width: 750rpx;
      text-align: center;
      line-height:80rpx;
      color: #aaa;
    }
  }

}
</style>
